#include "lvgl/lvgl.h"
#include "app/guide/lv_guide_demo.h"

LV_IMG_DECLARE(camera_fill)
LV_IMG_DECLARE(folder_fill)
LV_IMG_DECLARE(notification_fill)
LV_IMG_DECLARE(picture_fill)
LV_IMG_DECLARE(telephone_fill)

static const lv_img_dsc_t *iconArrary[5]=
{
    &camera_fill,&folder_fill,
    &notification_fill,&picture_fill,
    &telephone_fill
};

static const char *textArrary[5] =
{
    "Camera","Folder","Notification",
    "Picture","Telephone"
};

static lv_obj_t *last_select_obj = NULL;

static void lv_guide_draw_item_event_cb(lv_event_t * e)
{
//    lv_obj_t * obj = lv_event_get_target(e);

//    int16_t r_mask_id = 0;
//    lv_draw_mask_radius_param_t r_mask_param;
//    //lv_draw_mask_radius_init(lv_draw_mask_radius_param_t * param, const lv_area_t * rect, lv_coord_t radius, bool inv);
//    lv_draw_mask_radius_init(&r_mask_param,&a,100,false);
//    r_mask_id = lv_draw_mask_add(&r_mask_param,NULL);


//    lv_draw_rect(dsc->draw_ctx, &draw_rect_dsc, &a);

//    lv_draw_mask_free_param(&r_mask_param);
//    lv_draw_mask_remove_id(r_mask_id);
}

static void lv_guide_demo_0_itemclick_cb(lv_event_t * e)
{
    lv_obj_t *item_btn = (lv_obj_t*)e->current_target;
    if(last_select_obj == item_btn) {
        return;
    }
    if(item_btn == NULL) {
        printf("errorNot find item obj\n");
        return;
    }

    lv_obj_t *item_icon = lv_obj_get_child(item_btn,0);
    if(item_icon != NULL) {
        lv_obj_add_state(item_icon,LV_STATE_USER_1);
    }

    lv_obj_t *mask_obj = lv_obj_get_child(item_btn,1);
    if(mask_obj != NULL) {
        lv_obj_add_state(mask_obj,LV_STATE_USER_1);
    }

    lv_obj_t *item_label = lv_obj_get_child(item_btn,2);
    if(item_label != NULL) {
        lv_obj_add_state(item_label,LV_STATE_USER_1);
    }

    if(last_select_obj != NULL) {
        lv_obj_t *item_icon = lv_obj_get_child(last_select_obj,0);
        if(item_icon != NULL) {
            lv_obj_clear_state(item_icon,LV_STATE_USER_1);
        }

        lv_obj_t *mask_obj = lv_obj_get_child(last_select_obj,1);
        if(mask_obj != NULL) {
            lv_obj_clear_state(mask_obj,LV_STATE_USER_1);
        }

        lv_obj_t *item_label = lv_obj_get_child(last_select_obj,2);
        if(item_label != NULL) {
            lv_obj_clear_state(item_label,LV_STATE_USER_1);
        }
    }
    last_select_obj = item_btn;
}

void lv_guide_demo_0(void)
{
    lv_obj_set_style_bg_opa(lv_scr_act(),LV_OPA_COVER,0);
    lv_obj_set_style_bg_color(lv_scr_act(),lv_palette_main(LV_PALETTE_GREY),0);

    lv_obj_t *bg = lv_obj_create(lv_scr_act());
    lv_obj_set_size(bg,LV_PCT(75),LV_PCT(12));
    lv_obj_align(bg,LV_ALIGN_BOTTOM_MID,0,-30);
    lv_obj_set_style_bg_color(bg,lv_color_white(),0);
    lv_obj_set_style_bg_opa(bg,LV_OPA_COVER,0);
    lv_obj_clear_flag(bg,LV_OBJ_FLAG_SCROLLABLE);

    lv_obj_t *parent = lv_obj_create(lv_scr_act());
    lv_obj_remove_style_all(parent);
    lv_obj_set_size(parent,LV_PCT(75),LV_PCT(22));
    lv_obj_align(parent,LV_ALIGN_BOTTOM_MID,0,-30);
    lv_obj_set_style_pad_column(parent,43,0);
//    lv_obj_set_style_bg_color(parent,lv_color_black(),0);
//    lv_obj_set_style_bg_opa(parent,LV_OPA_50,0);
    lv_obj_clear_flag(parent,LV_OBJ_FLAG_SCROLLABLE);
    lv_obj_set_flex_flow(parent, LV_FLEX_FLOW_ROW);
    lv_obj_set_style_flex_main_place(parent,LV_FLEX_ALIGN_CENTER,0);

    static lv_style_prop_t props[] = {
        LV_STYLE_Y,LV_STYLE_TEXT_OPA,LV_STYLE_BG_OPA,LV_STYLE_OUTLINE_OPA,LV_STYLE_IMG_RECOLOR,LV_STYLE_PROP_INV
    };

    static lv_style_transition_dsc_t transition_dsc_def;
    lv_style_transition_dsc_init(&transition_dsc_def, props, lv_anim_path_ease_in_out, 300, 0, NULL);
    static lv_style_transition_dsc_t transition_dsc_text;
    lv_style_transition_dsc_init(&transition_dsc_text, props, lv_anim_path_ease_in_out, 300, 100, NULL);

    for(int i = 0; i < 5; i++) {
        lv_obj_t *item = lv_btn_create(parent);
        lv_obj_remove_style_all(item);
        lv_obj_set_size(item,LV_PCT(15),LV_PCT(100));
        lv_obj_update_layout(parent);
        lv_obj_add_event_cb(item,lv_guide_demo_0_itemclick_cb,LV_EVENT_CLICKED,NULL);
//        lv_obj_set_style_bg_color(item,lv_color_hex(0xff0000),0);
//        lv_obj_set_style_bg_opa(item,LV_OPA_50,0);


        lv_obj_t *mask_bg = lv_obj_create(item);
        lv_obj_remove_style_all(mask_bg);
        lv_obj_set_size(mask_bg,LV_PCT(55),LV_PCT(50));
        lv_obj_set_style_bg_opa(mask_bg,LV_OPA_TRANSP,0);
        lv_obj_set_style_bg_opa(mask_bg,LV_OPA_COVER,LV_STATE_USER_1);
        lv_obj_set_style_bg_color(mask_bg,lv_palette_main(LV_PALETTE_BLUE),0);
        lv_obj_set_style_radius(mask_bg,50,0);
        lv_obj_set_style_outline_opa(mask_bg,LV_OPA_TRANSP,0);
        lv_obj_set_style_outline_opa(mask_bg,LV_OPA_COVER,LV_STATE_USER_1);
        lv_obj_set_style_outline_color(mask_bg,lv_palette_main(LV_PALETTE_GREY),0);
        lv_obj_set_style_outline_width(mask_bg,6,0);
        lv_obj_align(mask_bg,LV_ALIGN_TOP_MID,0,20);
//        lv_obj_set_style_opa(mask_bg,LV_OPA_TRANSP,LV_STATE_DEFAULT);
//        lv_obj_set_style_opa(mask_bg,LV_OPA_COVER,LV_STATE_USER_1);
        lv_obj_set_style_y(mask_bg,lv_obj_get_height(item) - 70,LV_STATE_DEFAULT);
        lv_obj_set_style_y(mask_bg,lv_obj_get_height(item) / 2 - 55,LV_STATE_USER_1);
        lv_obj_set_style_transition(mask_bg,&transition_dsc_def,LV_STATE_DEFAULT);
        lv_obj_set_style_transition(mask_bg,&transition_dsc_def,LV_STATE_USER_1);
        lv_obj_add_flag(mask_bg,LV_OBJ_FLAG_EVENT_BUBBLE);

//        lv_obj_t *mask_r = lv_obj_create(item);
//        lv_obj_set_size(mask_r,50,50);
//        lv_obj_remove_style_all(mask_r);
//        lv_obj_set_size(mask_r,30,30);
//        lv_obj_set_style_bg_color(mask_r,lv_color_hex(0xff0000),0);
//        lv_obj_set_style_bg_opa(mask_r,LV_OPA_COVER,0);
//        lv_obj_set_style_radius(mask_r,50,0);
//        lv_obj_align(mask_r,LV_ALIGN_LEFT_MID,3,-12);

//        lv_obj_update_layout(item);
//        lv_obj_update_layout(parent);
//        int16_t r_mask_id = 0;
//        lv_draw_mask_radius_param_t r_mask_param;
//        //lv_draw_mask_radius_init(lv_draw_mask_radius_param_t * param, const lv_area_t * rect, lv_coord_t radius, bool inv);
//        printf("%d  %d  %d  %d\n",mask_r->coords.x1,mask_r->coords.y1,mask_r->coords.x2,mask_r->coords.y2);
//        lv_draw_mask_radius_init(&r_mask_param,&mask_r->coords,100,false);
//        r_mask_id = lv_draw_mask_add(&r_mask_param,NULL);
//        lv_obj_update_layout(item);
//        lv_draw_mask_free_param(&r_mask_param);
//        lv_draw_mask_remove_id(r_mask_id);


        lv_obj_t *icon = lv_img_create(item);
        lv_img_set_zoom(icon,70);
        lv_obj_add_flag(icon,LV_OBJ_FLAG_EVENT_BUBBLE);
        lv_img_set_src(icon,iconArrary[i]);
        lv_obj_set_style_y(icon,15,LV_STATE_DEFAULT);
        lv_obj_set_style_y(icon,-37,LV_STATE_USER_1);
        lv_obj_set_style_img_recolor(icon,lv_color_white(),LV_STATE_USER_1);
        lv_obj_set_style_img_recolor_opa(icon, LV_OPA_COVER,LV_STATE_USER_1);
        lv_obj_set_style_img_recolor_opa(icon, LV_OPA_TRANSP,LV_STATE_DEFAULT);
        lv_obj_set_x(icon,-28);
        lv_obj_set_style_transition(icon,&transition_dsc_def,LV_STATE_DEFAULT);
        lv_obj_set_style_transition(icon,&transition_dsc_def,LV_STATE_USER_1);

        lv_obj_t *label = lv_label_create(item);
        lv_label_set_text(label,textArrary[i]);
        lv_obj_set_style_text_color(label,lv_palette_main(LV_PALETTE_GREY),0);
        lv_obj_set_style_text_font(label,&lv_font_montserrat_22,0);
        lv_obj_align(label,LV_ALIGN_CENTER,0,0);
        lv_obj_set_style_text_opa(label,LV_OPA_TRANSP,LV_STATE_DEFAULT);
        lv_obj_set_style_text_opa(label,LV_OPA_COVER,LV_STATE_USER_1);
        lv_obj_set_style_y(label,lv_obj_get_height(item),LV_STATE_DEFAULT);
        lv_obj_set_style_y(label,48,LV_STATE_USER_1);
        lv_obj_set_style_transition(label,&transition_dsc_text,LV_STATE_DEFAULT);
        lv_obj_set_style_transition(label,&transition_dsc_text,LV_STATE_USER_1);
    }

    lv_event_send(lv_obj_get_child(parent,0),LV_EVENT_CLICKED,NULL);
}

static lv_obj_t *g_mask_obj = NULL;

static void lv_guide_demo_1_itemclick_cb(lv_event_t * e)
{
    lv_obj_t *item_btn = (lv_obj_t*)e->current_target;
    if(last_select_obj == item_btn) {
        return;
    }
    if(item_btn == NULL) {
        printf("errorNot find item obj\n");
        return;
    }

    uint32_t total = lv_obj_get_x(lv_obj_get_parent(item_btn)) + lv_obj_get_x(item_btn) + 22;
    if(!lv_obj_has_state(g_mask_obj,LV_STATE_USER_1)) {
        lv_obj_set_style_x(g_mask_obj,total,LV_STATE_USER_1);
        lv_obj_add_state(g_mask_obj,LV_STATE_USER_1);
        lv_obj_clear_state(g_mask_obj,LV_STATE_USER_2);
    }
    else if(!lv_obj_has_state(g_mask_obj,LV_STATE_USER_2)){
        lv_obj_set_style_x(g_mask_obj,total,LV_STATE_USER_2);
        lv_obj_add_state(g_mask_obj,LV_STATE_USER_2);
        lv_obj_clear_state(g_mask_obj,LV_STATE_USER_1);
    }
    lv_obj_t *item_icon = lv_obj_get_child(item_btn,0);
    if(item_icon != NULL) {
        lv_obj_add_state(item_icon,LV_STATE_USER_1);
    }

    lv_obj_t *item_label = lv_obj_get_child(item_btn,1);
    if(item_label != NULL) {
        lv_obj_add_state(item_label,LV_STATE_USER_1);
    }

    if(last_select_obj != NULL) {
        lv_obj_t *item_icon = lv_obj_get_child(last_select_obj,0);
        if(item_icon != NULL) {
            lv_obj_clear_state(item_icon,LV_STATE_USER_1);
        }

        lv_obj_t *item_label = lv_obj_get_child(last_select_obj,1);
        if(item_label != NULL) {
            lv_obj_clear_state(item_label,LV_STATE_USER_1);
        }
    }
    last_select_obj = item_btn;
}

void lv_guide_demo_1(void)
{
    lv_obj_set_style_bg_opa(lv_scr_act(),LV_OPA_COVER,0);
    lv_obj_set_style_bg_color(lv_scr_act(),lv_palette_main(LV_PALETTE_GREY),0);

    lv_obj_t *bg = lv_obj_create(lv_scr_act());
    lv_obj_set_size(bg,LV_PCT(75),LV_PCT(12));
    lv_obj_align(bg,LV_ALIGN_BOTTOM_MID,0,-30);
    lv_obj_set_style_bg_color(bg,lv_color_white(),0);
    lv_obj_set_style_bg_opa(bg,LV_OPA_COVER,0);
    lv_obj_clear_flag(bg,LV_OBJ_FLAG_SCROLLABLE);

    static lv_style_prop_t props[] = {
        LV_STYLE_X,LV_STYLE_Y,LV_STYLE_TEXT_OPA,LV_STYLE_BG_OPA,LV_STYLE_OUTLINE_OPA,LV_STYLE_IMG_RECOLOR,LV_STYLE_PROP_INV
    };

    static lv_style_transition_dsc_t transition_dsc_def;
    lv_style_transition_dsc_init(&transition_dsc_def, props, lv_anim_path_ease_in_out, 300, 0, NULL);
    static lv_style_transition_dsc_t transition_dsc_text;
    lv_style_transition_dsc_init(&transition_dsc_text, props, lv_anim_path_ease_in_out, 300, 100, NULL);

    lv_obj_t *mask_bg = lv_obj_create(lv_scr_act());
    lv_obj_remove_style_all(mask_bg);
    lv_obj_set_size(mask_bg,100,100);
    lv_obj_set_style_bg_opa(mask_bg,LV_OPA_COVER,0);
    lv_obj_set_style_bg_color(mask_bg,lv_palette_main(LV_PALETTE_BLUE),0);
    lv_obj_set_style_radius(mask_bg,150,0);
    lv_obj_set_style_outline_opa(mask_bg,LV_OPA_COVER,LV_STATE_USER_1);
    lv_obj_set_style_outline_color(mask_bg,lv_palette_main(LV_PALETTE_GREY),0);
    lv_obj_set_style_outline_width(mask_bg,6,0);
    lv_obj_align(mask_bg,LV_ALIGN_BOTTOM_LEFT,0,20);
    lv_obj_set_style_y(mask_bg,LV_DIR_VER - 90,LV_STATE_DEFAULT);
    lv_obj_set_x(mask_bg,212);
    lv_obj_set_style_transition(mask_bg,&transition_dsc_def,LV_STATE_USER_1);
    lv_obj_set_style_transition(mask_bg,&transition_dsc_def,LV_STATE_USER_2);
    g_mask_obj = mask_bg;

    lv_obj_t *parent = lv_obj_create(lv_scr_act());
    lv_obj_remove_style_all(parent);
    lv_obj_set_size(parent,LV_PCT(75),LV_PCT(22));
    lv_obj_align(parent,LV_ALIGN_BOTTOM_MID,0,-30);
    lv_obj_set_style_pad_column(parent,43,0);
//    lv_obj_set_style_bg_color(parent,lv_color_black(),0);
//    lv_obj_set_style_bg_opa(parent,LV_OPA_50,0);
    lv_obj_clear_flag(parent,LV_OBJ_FLAG_SCROLLABLE);
    lv_obj_set_flex_flow(parent, LV_FLEX_FLOW_ROW);
    lv_obj_set_style_flex_main_place(parent,LV_FLEX_ALIGN_CENTER,0);

    for(int i = 0; i < 5; i++) {
        lv_obj_t *item = lv_btn_create(parent);
        lv_obj_remove_style_all(item);
        lv_obj_set_size(item,LV_PCT(15),LV_PCT(100));
        lv_obj_update_layout(parent);
        lv_obj_add_event_cb(item,lv_guide_demo_1_itemclick_cb,LV_EVENT_CLICKED,NULL);

        lv_obj_t *icon = lv_img_create(item);
        lv_img_set_zoom(icon,70);
        lv_obj_add_flag(icon,LV_OBJ_FLAG_EVENT_BUBBLE);
        lv_img_set_src(icon,iconArrary[i]);
        lv_obj_set_style_y(icon,15,LV_STATE_DEFAULT);
        lv_obj_set_style_y(icon,-37,LV_STATE_USER_1);
        lv_obj_set_style_img_recolor(icon,lv_color_white(),LV_STATE_USER_1);
        lv_obj_set_style_img_recolor_opa(icon, LV_OPA_COVER,LV_STATE_USER_1);
        lv_obj_set_style_img_recolor_opa(icon, LV_OPA_TRANSP,LV_STATE_DEFAULT);
        lv_obj_set_x(icon,-28);
        lv_obj_set_style_transition(icon,&transition_dsc_def,LV_STATE_DEFAULT);
        lv_obj_set_style_transition(icon,&transition_dsc_def,LV_STATE_USER_1);

        lv_obj_t *label = lv_label_create(item);
        lv_label_set_text(label,textArrary[i]);
        lv_obj_set_style_text_color(label,lv_palette_main(LV_PALETTE_GREY),0);
        lv_obj_set_style_text_font(label,&lv_font_montserrat_22,0);
        lv_obj_align(label,LV_ALIGN_CENTER,0,0);
        lv_obj_set_style_text_opa(label,LV_OPA_TRANSP,LV_STATE_DEFAULT);
        lv_obj_set_style_text_opa(label,LV_OPA_COVER,LV_STATE_USER_1);
        lv_obj_set_style_y(label,lv_obj_get_height(item),LV_STATE_DEFAULT);
        lv_obj_set_style_y(label,48,LV_STATE_USER_1);
        lv_obj_set_style_transition(label,&transition_dsc_text,LV_STATE_DEFAULT);
        lv_obj_set_style_transition(label,&transition_dsc_text,LV_STATE_USER_1);
    }
    lv_event_send(lv_obj_get_child(parent,0),LV_EVENT_CLICKED,NULL);
}
